﻿<!DOCTYPE html> 
<html lang='en'> 
<head> 
    <meta charset='utf-8' /> 
	<title>DANANG MAP</title>	
    <script type='text/javascript' src='js/OpenLayers-2.12/OpenLayers.js'></script>
	<style>
		body {
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			font-size: small;
			margin: 0 auto;
			width: 900px;
		}
		#map_element {
			margin: 0 auto;
			position: relative;
			width: 900px;
			height: 420px;
			border: 1px solid black;
        }
	</style>
    <script type='text/javascript'>

    var map;
    
	function init() {
        
		var bounds = new OpenLayers.Bounds(
			107.817883080344, 15.9140867740137,
            108.337590000029, 16.2251302357152
		);
		
		var options = {
			controls: [
				new OpenLayers.Control.Navigation(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.LayerSwitcher({'ascending': true}),
				new OpenLayers.Control.MousePosition(),
				new OpenLayers.Control.ScaleLine(),
				new OpenLayers.Control.OverviewMap()
			],
			numZoomLevels: 10,
			maxExtent: bounds,
			maxResolution:  0.0020301051550195,
			projection: "EPSG:4326",
			units: 'degrees'
		};
		map = new OpenLayers.Map('map_element', options);
				
		var layer_QuanHuyen = new OpenLayers.Layer.WMS(
			'Quan Huyen',
			'http://localhost:8080/geoserver/DATN/wms',
			{
				layers: 'DATN:DNQH',
				styles: '',
				transparent: 'true',
			},
			{
			   singleTile: true, 
			   ratio: 1,
			   isBaseLayer: true,
			   yx : {'EPSG:4326' : false}
			} 
		);
        map.addLayer(layer_QuanHuyen);
		
		var layer_GiaoThong = new OpenLayers.Layer.WMS(
			'Giao Thong',
			'http://localhost:8080/geoserver/DATN/wms',
			{
				layers: 'DATN:DNGT',
				styles: '',
				transparent: 'true',
			},
			{
			   singleTile: true, 
			   ratio: 1, 
			   yx : {'EPSG:4326' : false}
			} 
		);
		map.addLayer(layer_GiaoThong);
		
		var layer_TramDung = new OpenLayers.Layer.WMS(
			'Tram Dung',
			'http://localhost:8080/geoserver/DATN/wms',
			{
				layers: 'DATN:DNTramDung',
				styles: '',
				transparent: 'true',
			},
			{
			   singleTile: true, 
			   ratio: 1, 
			   yx : {'EPSG:4326' : false}
			} 
		);
		map.addLayer(layer_TramDung);
		
		var layer_TuyenXe = new OpenLayers.Layer.WMS(
			'Tuyen Xe',
			'http://localhost:8080/geoserver/DATN/wms',
			{
				layers: 'DATN:DNTuyenXe',
				styles: '',
				transparent: 'true',
			},
			{
			   singleTile: true, 
			   ratio: 1, 
			   yx : {'EPSG:4326' : false}
			} 
		);
		map.addLayer(layer_TuyenXe);
		
        // Zoom the map to the max extent 
		if(!map.getCenter()){
			map.zoomToMaxExtent();
		}
    }

    </script>
</head>

<body onload='init();'>
    <div id='map_element'>
	</div>
</body>
</html>